<template>
  <div class="model-published-table-data-container" id="model-published-table-data-container">
    <common-border-table-with-page ref="tableData"
       :tableData="tableData"
       v-loading="loading"
       :table-title="tableTitle"
       :filterable="true"
       :filter-info="filterInfo"
       @search-data="searchData"
       @clear-data="searchData"
       type="index"
       :current-page.sync="currentPage"
       :total="total"
       :page-size.sync="pageSize"
       @size-change="handleSizeChange"
       @current-page-change="handleCurrentPageChange">

      <template #rowOption="scope">
        <el-button type="text" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
      </template>
    </common-border-table-with-page>
  </div>
</template>

<script>

import CommonBorderTableWithPage from '@/components/common/CommonBorderTableWithPage'
import {tableTitle, filterInfo} from '@/js/model/modelPublishedTableConfig'
import PaginationTableDataMixins from '@/components/mixins/table/PaginationTableDataMixins'
import {getPublishedInfo} from '@/js/api/model/modelpublished'

export default {
  name: 'ModelPublishedTableData',
  components: {
    CommonBorderTableWithPage
  },
  mixins: [PaginationTableDataMixins],
  data(){
    return {
    }
  },
  methods: {
    async getPublishedInfo(condition){
      this.loading = true
      const response = await getPublishedInfo(this.currentPage, this.pageSize,
        condition || this.$refs.tableData.getFilterData())
      if (response.errorMsg){
        this.$tips(response.errorMsg, 'error')
      } else {
        const page = response.data
        this.tableData = page.datas
        this.total = page.totalCount
      }
      this.loading = false
    },
    searchData(condition){
      this.currentPage = 1
      this.getPublishedInfo(condition)
    },
    handleSizeChange(val){
      this.pageSize = val
      const pageCount = Math.ceil(this.total / this.pageSize)
      if (this.currentPage <= pageCount){
        this.getPublishedInfo()
      }
    },
    handleCurrentPageChange(val){
      this.currentPage = val
      this.getPublishedInfo()
    },
    viewDetail(data){
      this.$emit('view-detail', data)
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
  },
  mounted(){
    this.getPublishedInfo()
  }
}
</script>

<style lang="less">
  .model-published-table-data-container{
    height: 100%;
  }
</style>
